import { SET_LIST_FILTER } from "./type";
import {
  FilterOutlined,
  SwapOutlined,
  FieldTimeOutlined,
  TransactionOutlined,
} from "@ant-design/icons";

export type LIST_FILTER = {
  otherFilter: LIST_FILTER_OPT & {
    state: object | undefined;
  };
  recommend: LIST_FILTER_OPT & {
    state: boolean; // true为 从早到晚
  };
  time: LIST_FILTER_OPT & {
    state: boolean; // true为 从早到晚
  };
  price: LIST_FILTER_OPT & {
    state: boolean; // true为 从低到高
  };
};

export type CHANGE_OPT = {
  type: keyof LIST_FILTER;
  data: LIST_FILTER_OPT & {
    state: boolean | object | undefined;
  };
};

type LIST_FILTER_OPT = {
  isActive: boolean;
  icon: unknown;
  desc: string;
  isAlwaysActive: boolean;
  /**
   *  0 -> active   1 -> blur  2 -> toggle
   */
  clickFn: (type: 0 | 1 | 2) => CHANGE_OPT["data"] | void;
};

const initData: LIST_FILTER = {
  otherFilter: {
    desc: "筛选",
    isActive: true,
    icon: FilterOutlined,
    state: undefined,
    isAlwaysActive: true,
    clickFn() {},
  },
  recommend: {
    state: true,
    desc: "推荐排序",
    isActive: true,
    icon: SwapOutlined,
    isAlwaysActive: false,

    // 0 -> active   1 -> blur  2 -> toggle
    clickFn: function (type: 0 | 1 | 2) {
      return {
        icon: this.icon,
        state: type === 0 ? true : type === 1 ? false : !this.state,
        desc: "推荐排序",
        isActive: type !== 1,
        isAlwaysActive: this.isAlwaysActive,
        clickFn: this.clickFn,
      };
    },
  },
  time: {
    state: true,
    desc: "时间",
    isActive: false,
    icon: FieldTimeOutlined,
    isAlwaysActive: false,
    clickFn: function (type: 0 | 1 | 2) {
      // 0 -> active   1 -> blur  2 -> toggle
      return {
        icon: this.icon,
        state: type === 0 ? true : type === 1 ? false : !this.state,
        desc:
          type === 0
            ? "从早到晚"
            : type === 1
            ? "时间"
            : !this.state
            ? "从早到晚"
            : "从晚到早",
        isActive: type !== 1,
        isAlwaysActive: this.isAlwaysActive,
        clickFn: this.clickFn,
      };
    },
  },
  price: {
    state: true,
    desc: "价格",
    isActive: false,
    icon: TransactionOutlined,
    isAlwaysActive: false,
    clickFn: function (type: 0 | 1 | 2) {
      // 0 -> active   1 -> blur  2 -> toggle
      return {
        icon: this.icon,
        state: type === 0 ? true : type === 1 ? false : !this.state,
        desc:
          type === 0
            ? "从低到高"
            : type === 1
            ? "时间"
            : !this.state
            ? "从低到高"
            : "从高到低",
        isActive: type !== 1,
        isAlwaysActive: this.isAlwaysActive,
        clickFn: this.clickFn,
      };
    },
  },
};

export function listFilter(
  state = initData,
  action: { type: string; data: CHANGE_OPT }
) {
  if (action.type === SET_LIST_FILTER) {
    // console.log('action.data.data',action.data.data,state);

    return {
      ...state,
      [action.data.type]: {
        ...action.data.data,
      },
    };
  } else return state;
}

export const getListFilter =
  () =>
  (state: any): LIST_FILTER =>
    state.listFilter;

export function setListFilter(data: CHANGE_OPT) {
  return {
    type: SET_LIST_FILTER,
    data,
  };
}
